<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>backdrop-filter filter</title>

	<style>
		body, section {
			margin: 0;
			padding: 0;
		}

		.iphone-screen {
			width: 390px;
			margin: 0 auto;
			position: relative;
		}

		.iphone-screen img {
			width: 100%;
			height: auto;
		}

		.control-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 50%;
			background-color: rgba(255, 255, 255, .4);
			backdrop-filter: saturate(180%) blur(20px);
			resize: vertical;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<h1>毛玻璃效果</h1>
	
	<section class="iphone-screen">
		<img src="apps.png" alt="">

		<div class="control-box">
			
		</div>
	</section>

	<h2>参考</h2>
	<a href="http://www.w3cplus.com/css3/advanced-css-filters.html">高级CSS filters</a>
	<a href="http://iamvdo.me/en/blog/advanced-css-filters">Advanced CSS filters</a>
	<a href="http://www.johanbrook.com/writings/what-s-new-in-safari-9/">What's new in Safari 9</a>
</body>
</html>